<template>
	<i
		:class="iconClass"
		class="Icon"
		:style="iconStyle"
	/>
</template>

<script setup lang="ts">
import {computed} from 'vue';

const props = defineProps({
	name:{
		type:String,
		required:true,
	},
	color:{
		type:String,
		default:'inherit',
	},
	size:{
		type:[String, Number],
		default:'16px',
	},
});

const iconClass = computed(() => `MF_iconfont ${props.name}`);

const iconStyle = computed(() => ({
	color:props.color,
	fontSize:typeof props.size === 'number' ? `${props.size}px` : props.size,
}));
</script>

<style scoped lang="scss">
@import '../../iconfont/iconfont.css';

.Icon {
	display: inline-block;
	vertical-align: middle;
}
</style>